<!DOCTYPE html>
<html>

<head>

  <title>Demo Chat</title>

  <link href="bootstrap.css" rel="stylesheet">

  <style>
    body {
      padding: 20px;
    }

    .console {
      height: 400px;
      overflow: auto;
    }

    .username-msg {
      color: orange;
    }

    .connect-msg {
      color: green;
    }

    .disconnect-msg {
      color: red;
    }

    .send-msg {
      color: #888
    }
  </style>


  <script src="js/socket.io/socket.io.js"></script>
  <script src="js/moment.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  <script>

    var userName1 = 'user1_' + Math.floor((Math.random() * 1000) + 1);
    var userName2 = 'user2_' + Math.floor((Math.random() * 1000) + 1);

    var chat1Socket = io.connect('http://localhost:9092/chat1');
    var chat2Socket = io.connect('http://localhost:9092/chat2');

    function connectHandler(parentId) {
      return function () {
        output('<span class="connect-msg">Client has connected to the server!</span>', parentId);
      }
    }

    function messageHandler(parentId) {
      return function (data) {
        output('<span class="username-msg">' + data.userName + ':</span> ' + data.message, parentId);
      }
    }

    function disconnectHandler(parentId) {
      return function () {
        output('<span class="disconnect-msg">The client has disconnected!</span>', parentId);
      }
    }

    function sendMessageHandler(parentId, userName, chatSocket) {
      var message = $(parentId + ' .msg').val();
      $(parentId + ' .msg').val('');

      var jsonObject = {
        '@class': 'com.corundumstudio.socketio.demo.ChatObject',
        userName: userName,
        message: message
      };
      chatSocket.json.send(jsonObject);
    }


    chat1Socket.on('connect', connectHandler('#chat1'));
    chat2Socket.on('connect', connectHandler('#chat2'));

    chat1Socket.on('message', messageHandler('#chat1'));
    chat2Socket.on('message', messageHandler('#chat2'));

    chat1Socket.on('disconnect', disconnectHandler('#chat1'));
    chat2Socket.on('disconnect', disconnectHandler('#chat2'));

    function sendDisconnect1() {
      chat1Socket.disconnect();
    }

    function sendDisconnect2() {
      chat2Socket.disconnect();
    }

    function sendMessage1() {
      sendMessageHandler('#chat1', userName1, chat1Socket);
    }

    function sendMessage2() {
      sendMessageHandler('#chat2', userName2, chat2Socket);
    }


    function output(message, parentId) {
      var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
      var element = $("<div>" + currentTime + " " + message + "</div>");
      $(parentId + ' .console').prepend(element);
    }

    $(document).keydown(function (e) {
      if (e.keyCode == 13) {
        $('#send').click();
      }
    });
  </script>
</head>

<body>

  <h1>Namespaces demo chat</h1>

  <br />

  <div id="chat1" style="width: 49%; float: left;">
    <h4>chat1</h4>
    <div class="console well">
    </div>

    <form class="well form-inline" onsubmit="return false;">
      <input class="msg input-xlarge" type="text" placeholder="Type something..." />
      <button type="button" onClick="sendMessage1()" class="btn" id="send">Send</button>
      <button type="button" onClick="sendDisconnect1()" class="btn">Disconnect</button>
    </form>
  </div>

  <div id="chat2" style="width: 49%; float: right;">
    <h4>chat2</h4>
    <div class="console well">
    </div>

    <form class="well form-inline" onsubmit="return false;">
      <input class="msg input-xlarge" type="text" placeholder="Type something..." />
      <button type="button" onClick="sendMessage2()" class="btn" id="send">Send</button>
      <button type="button" onClick="sendDisconnect2()" class="btn">Disconnect</button>
    </form>
  </div>



</body>

</html>